<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>客户反馈系统-首页</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="/ksp/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/ksp/layui/css/layui.css" rel="stylesheet">
<!-- 引入js -->
<script type="text/javascript" src="/ksp/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/ksp/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/ksp/layui/layui.all.js"></script>
<script type="text/javascript" src="/ksp/js/ksp.com.js"></script>
<script type="text/javascript">
	var element;
	var tskLst; //任务列表
	var curIdx = 0;
	var showNum = 12; //展示列表
	layui.use("element", function() {
		element = layui.element;
	})

	function iniBtn() {
		$("#hidTskTyp").val("1");
		
		/* 首页元素切换 */
		element.on("tab(typFilter)", function(data) {
			var tskTyp = this.value;
			$("#hidTskTyp").val(tskTyp);
			clickEvent();
		});
		
		/* 搜索 */
		$("#bSearch").click(function() {
			clickEvent();
		});
		
		/* 加载更多 */
		$("#bLoadMore").click(function() {
			showDtabyTyp("mor");
		});
		
		/* 构建索引 */
		$("#bReset").click(function () {
			
		});
	}

	function clickEvent() {
		var tskCon = $("#txtTskCon").val();
		var tskTyp = $("#hidTskTyp").val();
		
		if (tskCon == null || tskCon == "") {
			qryDtabyTyp("tbl", tskTyp);
		} else {
			qryDtabyTyp("ind", tskTyp);
		}
	}
	
	
	/* 数据的查询与展示，
	数据查询的三种方式，默认查询，切换类型的查询，索引的查询，只查询前10条记录 */
	function qryDtabyTyp(dtaOrg, tskTyp) {
		var curUrl;
		var reqDta;
		if (dtaOrg == "tbl") {
			curUrl = "/ksp/com/KSPC01";
			reqDta = {"TSK_TYP" : tskTyp};
		} else {
			curUrl = "ksp/com/KSPC01B";
			reqDta = {"TSK_TYP" : tskTyp, "KEY_WRD" : $("#txtTskCon").val()};
		}
		$.ajax({
			url : curUrl
			,type : "post"
			,dataType : "json"
			,data : reqDta
			,success : function(res) {
				if (res.cod == "200") {
					tskLst = eval(res.jdt);
				} else {
					alert(res.msg);
				}
				showDtabyTyp("fir");
			}
		});
	}
	
	/* 根据类型展示数据 */
	function showDtabyTyp(loaTyp) {
		if (loaTyp == "fir") {
			curIdx = 0;
			$("#wpf").empty();
			$("#mis").empty();
			$("#zws").empty();
			$("#oth").empty();
		}
		var lodIdx = curIdx + showNum; //加载到该下标的第一个
		if (tskLst == null) {
			return;
		}
		if (tskLst.length < lodIdx) {
			$("#bLoadMore").css("display", "none");
			lodIdx = tskLst.length;
		} else {
			$("#bLoadMore").css("display", "block");
		}
		
		for (var i = curIdx;i < lodIdx; i++) {
			var panelType = "";
			var tskSts = tskLst[i].TSK_STS;
			switch (tskSts) {
			case "W":
				panelType = "panel-danger";
				break;
			case "P":
				panelType = "panel-info";
				break;
			case "S":
				panelType = "panel-success";
				break;
			case "F":
				panelType = "panel-default";
				break;
			}

			var tskHtml = '<div class="panel ' + panelType
					+ '" onclick = "queryTskInf(' + tskLst[i].TCH_IDN
					+ ')" ><div class="panel-heading"><h4>'
					+ tskLst[i].KSP_TTL + '</h4></div></div>';
			var tskTyp = tskLst[i].TSK_TYP;
			switch (tskTyp) {
			case "1":
				$("#wpf").append(tskHtml);
				break;
			case "2":
				$("#mis").append(tskHtml);
				break;
			case "3":
				$("#zws").append(tskHtml);
				break;
			case "4":
				$("#oth").append(tskHtml);
				break;
			}
			curIdx++;
		}
	}
	
	function queryTskInf(ttlTch) {
		var reqDta = {"TCH_IDN" : ttlTch};
		$.ajax({
			url : "/ksp/com/KSPC02"
			,type : "post"
			,dataType : "json"
			,data : reqDta
			,success : function(res) {
				if (res.cod == "200") {
					var tskInfArr = eval(res.jdt)
					var tskDta = tskInfArr[0];
					$("#tskTtl").html(tskDta.KSP_TTL);
					$("#tskCon").html(tskDta.KSP_CON);
					$("#tskRmk").html(tskDta.SPC_RMK);
					
					var panTyp = "";
					switch (tskDta.TSK_STS) {
					case "W" : panTyp="danger"; break;
					case "P" : panTyp="info"; break;
					case "S" : panTyp="success"; break;
					case "F" : panTyp="default"; break;
					default : break;
					}
					$("#panelDiv").attr("class", "panel-" + panTyp);
				}
			}
			,error :function (res) {
				
			}
		});
		
		$("#tskInfModal").modal("show");
	}
	
	function getTop() {
		$("html, body").animate({scrollTop:0}, 500);
	}
	
	document.onkeydown = function(e) {
		if (e.keyCode = "13") {
			$("#bSearch").click();
			e.returnValue = false;
		}
	}
	
</script>

<script type="text/javascript">
	$(function() {
		iniNar();
		iniBtn();
		qryDtabyTyp("tbl", "1");
		var urlStr = window.location.href;
		var arr = urlStr.split("/");
		var pgeStr = arr[arr.length - 1];
		if ((pgeStr == null || pgeStr.length == 0) && (arr.length - 2) > -1) {
			pgeStr = arr[arr.length - 2];
			if (pgeStr == null || pgeStr.length == 0) {
				pgeStr = "ksp";
			}
		}
		$("#" + pgeStr).attr("class", "layui-nav-item layui-this");
		element.render(); //渲染
	});
</script>

</head>
<body>
	<div id="navDiv" ></div>

	<div style="width: 1200px; margin: 0 auto; margin-top: 50px;">
		<div class="layui-tab layui-tab-brief" lay-filter="typFilter">
			<div>
				<div class="layui-inline" style="padding-left:50px;">
					<input class="layui-input" id="txtTskCon" autocomplete="off"
					   placeholder="输入任务标题关键字" style="width:50em;">
				</div>
				<button class="layui-btn" id="bSearch">搜索 </button>
				<button class="layui-btn" id="bReset">重置 </button>
				<input type="hidden" id="hidTskTyp">
			</div>
		
			<ul class="layui-tab-title">
				<li class="layui-this" style="width: 150px" value="1">工作平台</li>
				<li style="width: 150px" value="2">自动发布工具</li>
				<li style="width: 150px" value="3">微服务</li>
				<li style="width: 150px" value="4">其他</li>
			</ul>

			<div class="layui-tab-content" id="tskDiv">
				<div class="layui-tab-item layui-show" id="wpf"></div>
				<div class="layui-tab-item " id="mis"></div>
				<div class="layui-tab-item " id="zws"></div>
				<div class="layui-tab-item " id="oth"></div>
			</div>
		</div>

		<button class="btn-btn-default" onclick="getTop()"
			style="position: fixed; bottom: 50px; right: 50px" title="回到顶部">
			<i class="icon-eject icon-2x"></i>
		</button>

		<button type="button" id="bLoadMore" class="btn brn-default btn-block"
			style="display: none; margin-left: 12px; margin-bottom: 50px;">查看更多</button>

	</div>
	
	<div class="modal fade" id="tskInfModal" tabindex="1" role="dialog">
		<div class="modal-dialog" style="width:900px;">
			<div class="modal-content">
				<div id="panelDiv" class="panel-danger">
					<div class="panel-heading">
						<button type="button" class="close" data-dismiss="modal"
						 aria-hidden="true"></button>
						 <h3 class="panel-title" id="tskTtl"></h3>
					</div>
					<div class="panel-body" style="overflow:auto;">
						<p id="tskCon"></p>
						<p style="font-weight:bold;">解决方法：</p>
						<p id="tskRmk"></p>
					</div>
				</div>
			</div>
		</div>
	</div>

</body>
</html>